﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>JS_chen-商城</title>
    <link type="text/css" rel="stylesheet" href="__ZHOME__/css/base.css">
    <link type="text/css" rel="stylesheet" href="__ZHOME__/css/style.css">
    <link type="text/css" rel="stylesheet" href="__ZHOME__/css/idialog.css">
    <script src="__ZHOME__/js/jquery.js"></script>
    <script src="__ZY__/node_modules/vue/dist/vue.js"></script>
    <script src="__ZY__/node_modules/axios/dist/axios.js"></script>
    <style>
        .count-box input {
            width: 110px;
            border: none;
            padding: 0px;
            margin: 0;
            height: 38px;
            line-height: 38px;
            text-indent: 2em;
        }

    </style>
</head>

<body>
<div id="app">
    <div class="header">
    <div class="center">
        <div class="logo icon-bgr icon-logo ani-bg fl m-t-17"><a href="/">首页</a></div>
        <div class="category tc fl" id="category">
            <a href="#" class="f16 lh2">礼物分类<i class="icon-bgr icon-list m-l-5"></i></a>
            <div id="category_pop" class="category-pop tc dn">
                {foreach $categoryData as $v}
                <a href="/category/{$v['cid']}.html">{$v['catname']}</a>
                {/foreach}
            </div>
        </div>
        <div class="nav fl f16 lh2 m-t-28 rel">
            <a href="/category/2.html">科技达人</a>
            <a href="/category/3.html">创意礼物</a>
            <a href="/category/9.html">音乐欣赏</a>
        </div>
        <!--登陆 注册-->
        <div class="operate fr m-t-31 rel" id="user_operate">
            <a href="user.html" id="nav_user">
                <i class="icon-bgr icon-user m-7 ani-bg"></i>
                <span class="cart-count" id="cart_count">{{cartLen}}</span>

            </a>

            <a href="#" class="m-l-5" id="nav_cart">
                <i class="icon-bgr icon-cart ani-bg"></i>
            </a>


            <div class="user-box user-signin dn" id="nav_user_box">
                <i class="icon-bgr icon-operate"></i>
                {if condition="session('?user.user_username')"}
                <dl class="tc">
                    <dt class="f-b28850">
                        <?php echo  session('user.user_username') ?>
                    </dt>
                    <dd class="lh2"><a href="/user.html">个人中心</a></dd>
                    <dd class="lh2"><a href="/orderlist.html">我的订单</a></dd>
                    <dd class="lh2"><a href="/logout.html">退出登陆</a></dd>
                </dl>
                {else /}
                <dl class="tc">
                    <dt class="f-b28850">
                        <a class="f-b28850" href="/login.html">登录</a> /
                        <a class="f-b28850" href="/register.html">注册</a>
                    </dt>
                    <dd class="lh2"><a href="/user.html">个人中心</a></dd>
                    <dd class="lh2"><a href="/orderlist.html">我的订单</a></dd>

                </dl>
                {/if}
            </div>
            <div class="user-box user-cart dn" id="nav_cart_box"  style="z-index: 1; display: none;" v-if="cart">
                <i class="icon-bgr icon-operate"></i>
                <table class="f12">
                    <tbody >
                    <tr class="gds" v-for="(v,k) in cart">
                        <td width="25%">
                            <a :href="'goods/'+v['id']+'.html'">
                                <img width="60px" :src="v['cover']">
                            </a>
                        </td>
                        <td class="overtxt" width="50%">
                            <a :href="'goods/'+v['id']+'.html'">{{v['name']}}</a><br>礼物颜色:{{v['options'][0]['sname']}}
                        </td>
                        <td class="tr" width="25%">X{{v['num']}}<br>￥{{v['price']}}<br>
                            <a class="remove_item" data-rec-id="1301026" @click="del(k)" href="javascript:void(0)">删除</a>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="3">
                            <div class="clear m-t-10">
                                <a href="/cart.html" class="fr btn-red-sml ani-bg">去购物车结算</a>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="user-box user-cart dn" id="nav_cart_box" style="z-index: 1; display: none;" v-else>
                <i class="icon-bgr icon-operate"></i>
                <p class="f12 f-999 tc p-y-20">购物车中还没有商品，赶紧选购吧！</p>
            </div>

        </div>
        <div class="search fr m-t-31">
            <!--搜索框-->
            <input type="text" name="search" id="head-search"><a href="javascript:void(0)" class="icon-bgr icon-search m-l-5" id="head-searchbtn"></a>
        </div>
    </div>
</div>
    <div class="bg-f5f5f5 p-b-10">
    <div class="currentloc bg-f5f5f5 clear">
        <div class="center f12">
            <div class="fl"><a href="/">首页</a><span>/</span>{$goodsData['gname']}</div>
            <a href="http://wpa.qq.com/msgrd?v=3&uin=1677658490&site=qq&menu=yes" class="fr qqbtn tc f-666" target="_blank">QQ在线交谈</a>
            <span class="fr m-r-100 f-a5937d"><!-- 节日名称  <i class="icon-bgr icon-gift m-l-10"></i>--></span>
        </div>
    </div>


    <div class="goods-info bg-fff overhide">
        <div class="center clear m-t-60">
            <div class="img-sm fl m-r-60" id="goods_img_list">
                {foreach $images as $k=>$v}
                <img src="{$v}" class=" img_id_{$k}">
                {/foreach}

            </div>
            <div class="img-single fl rel" id="goods_single_list"><span class="loading f16">
            <img src="__ZHOME__/picture/ajax-loader.gif"></span>

                {foreach $images as $k=>$v}
                <img src="{$v}" class="cloudzoom"
                     <?php if($k !=1): ?> style="display:none;" <?php endif; ?>>
                {/foreach}

            </div>
            <!--购物车页面-->
            <div class="goods-attr fr" >
                <h2 class="lh1 f30" v-text="goodsData['gname']"></h2>
                <h3 class="fn f14 m-t-20 f-666" v-text="goodsData['description']"></h3>
                <div class="clear m-t-20 price-box lh1">
                    <span class="fl f-d93732 f24 fb price-show" ><span v-text="goodsData['gprice']"></span>元</span>
                </div>
                <div class="p-y-20">
                    <?php if($subGoodsData): ?>
                    <div class="attr-box clear">
                        <span class="fl pro-title dib f-666">礼物款式：</span>
                        <span class="fl">


                          <a href="javascript:" @click="add(v,k)" class="select_attr  dib m-r-8 s_226" v-for="(v,k) in subGoodsData" >
                                {{v.sname}}
                          </a>

                         </span>
                    </div>
                    <div class="attr-box clear">

                        <span class="fl pro-title dib f-666" >数量：</span>
                        <div class="dib count-box">
                            <input type="number" v-model="goods.num"  value="1" min="1" :max="totalNum" >
                        </div>
                    </div>
                    <div class="attr-box clear">
                        <span class="fl pro-title dib f-666">库存：{{totalNum}} 件</span>
                    </div>
                    <?php endif; ?>
                </div>
                <div class=" clear m-t-20 lh1">
                    <form action="/home/Cart/index" method="post" id="hidden" >
                        <textarea name="data" style="display: none">{{goods}}</textarea>
                    </form>
                    <a href="javascript:void(0)" id="add_to_cart" @click="submits" class="btn-red-single  " style="background-color:#FFD9BC;color: #E5511D;padding: 15px 50px;margin-right: 10px">
                        立即购买
                    </a>




                    <a href="javascript:void(0)" @click="commits" id="product_diy" class="btn-red-single  " >加入购物车</a>
                </div>
                <div class="btn-others">
                    <a href="/category/{$goodsData['pid']}.html"><i class="icon-bgr icon-item m-r-10"></i>查看更多同类商品</a>
                </div>
            </div>
        </div>
    </div>
    <!--购物车结束-->

    <!--商品简介-->
    <div class="detail-content bg-fff">
        {$goodsData['details']}
    </div>
    <!--商品简介结束-->

    <div class="screen-image dn" id="screen_image" onselectstart="return false;">
        <div id="naturalpic" class="tc rel"><img src="__ZHOME__/picture/ajax-loader.gif" class="loading"></div>
        <i class="icon-bgr icon-goods-close hander" id="evt_close"></i>
        <i class="icon-bgr icon-goods-left hander" id="evt_left"></i>
        <i class="icon-bgr icon-goods-right hander" id="evt_right"></i>
        <ul id="tablist" class="tc"></ul>
    </div>
</div>

    <div class="footer">
        <div class="top">
            <div class="center clear">
                <div class="top-box1 fl">
                    <i class="icon-bgr icon-logo-bt fl m-r-60 m-l-20"></i>
                </div>
                <div class="top-box2 fl">
                    <img src="__ZHOME__/picture/slogan.png">
                </div>
                <div class="top-box3 fl">
                    <p class="fb f16">关注我们</p>
                    <p class="m-t-10">
                        <!--<a href="#" target="_blank" class="icon-bgr icon-sina"></a>-->
                        <!--<a href="#" target="_blank" class="icon-bgr icon-tencent m-l-10"></a>-->
                        <a href="javascript:void(0)" target="_blank" class="icon-bgr icon-wechat m-l-10 rel"><span class="dn pic-wx"></span></a>
                    </p>
                </div>
                <div class="top-box4 fl tc">
                    <p class="f12">周一至周日 8:00-24:00</p>
                    <a href="http://wpa.qq.com/msgrd?v=3&uin=1677658490&site=qq&menu=yes" class="qqbtn lh1 m-t-10 dib">QQ在线交谈</a>
                </div>
            </div>
        </div>
        <div class="bottom clear f-e7e7e7">

            <ul class="center clear icons f18 fb">
                <li class="fl fst"><i class="icon-bgr1 icon-ft1 m-r-16"></i>30天免费退换货</li>
                <li class="fl"><i class="icon-bgr1 icon-ft2 m-r-16"></i>100%正品保证</li>
                <li class="fl"><i class="icon-bgr1 icon-ft3 m-r-16"></i>全场免运费</li>
                <li class="fl"><i class="icon-bgr1 icon-ft4 m-r-16"></i>提供礼品级包装</li>
            </ul>
            <div class="center links clear">
                <div class="fl">
                    <p class="f-c3c3c3"><span class="m-r-16">© JS_chen</span><span><a href="" rel="nofollow" target="_blank"> </a></span></p>
                </div>
                <div class="fr">
                    <p class="f-f5f5f5 f0">
                        <!--<a href="#" target="_blank" class="f-f5f5f5">关于我们</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">帮助中心</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">人才招聘</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">售后服务</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">配送与验收</a><span>|</span>-->
                        <!--<a href="#" target="_blank" class="f-f5f5f5">联系我们</a>&lt;!&ndash; <span>|</span> &ndash;&gt;-->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var global_config ='';
</script>

<script src="__ZHOME__/js/common.js"></script>

<div class="toolbars tc" id="back_to_top">
    <a href="http://wpa.qq.com/msgrd?v=3&uin=1677658490&site=qq&menu=yes" target="_blank" class="ani-bg" id="goods_qq_chat"><i class="icon-bgr icon-qq"></i></a>
    <a href="javascript:void(0)" class="ani-bg m-t-10"><i class="icon-bgr icon-totop"></i></a>
</div>
<script>
    (function($){
        var $window = $(window),$totop = $("#back_to_top");
        $window.scroll(function(){
            winTop();
        });
        function winTop(){
            if($window.scrollTop()<100){
                $totop.stop().fadeOut(300);
            }else{
                $totop.stop().fadeIn(300);
            }
        }
        winTop();
    })(jQuery);

</script>

<script>
   let carts = new Vue({
        el:'#app',
        data:{
            goodsData:{$goodsData},
            subGoodsData:{$subGoodsData},
            goodsnum:0,
            goods:{
                'id':{$goodsData->gid},
                'name':'{$goodsData->gname}',
                'num':1,
                'price':{$goodsData->gprice},
                'options':'',
            },
            cart:{$cart},
            totalNum : {$totalNum},

        },

        methods:{
            add(v,k){
                this.goods['options'] = [v];
                this.totalNum =this.subGoodsData[k]['snum'];
            },
            del(k){
                axios.get('/api/APi/delete?sid='+k).then(function (response) {
                    carts.cart = response.data;
                })
            },
            commits(){
                if(this.goods['options'] == ''){
                    alert('请选择商品的款式');

                    // 判断商品数量

                }else {
                    data = JSON.stringify(this.goods);
                    axios.post('/api/APi/add',{data:data}).then(function (response) {
                        // 将购物车数据 返回
                        carts.cart = response.data;
                        alert('成功添加到购物车');
                    })
                }


            },
            submits(){
                if(this.goods['options'] == ''){
                    alert('请选择商品款式')
                }else {
                    $('#hidden').submit();
                }

            }
        },
           computed:{
               cartLen(){
                   let sum=0;
                   if(this.cart != null){
                       for (v in this.cart){
                           sum = sum +1;
                       }
                   }

                   return sum;
               }
           }
    })

</script>

<script src="__ZHOME__/js/goods.js"></script>

</body>

